<template>
  <div class="app-container">
    <!-- Header 区域 -->
    <my-header title="购物车案例"></my-header>

    <!-- 商品 Item 项组件 -->
    <my-goods
      v-for="item in cart"
      :key="item.id"
      :id="item.id"
      :title="item.goods_name"
      :thumb="item.goods_img"
      :price="item.goods_price"
      :count="item.goods_count"
      :state="item.goods_state"
      @stateChange="getState"
      @countChange="getCount"
    ></my-goods>

    <!-- Foote 区域 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import MyGoods from './components/MyGoods.vue'
import { mapState } from 'vuex'

export default {
  name: 'App',
  methods: {
    // 商品的选中状态发生了变化
    getState (e) {
      // {id: 1, value: false}
      console.log(e)
      this.$store.commit('shopcar/updataGoodsState', e)
    },
    // 商品的数量发生了变化
    getCount (e) {
      // {id: 1, value: 2}
      console.log(e)
      this.$store.commit('shopcar/updataGoodsCount', e)
    }
  },
  components: {
    MyHeader,
    MyFooter,
    MyGoods
  },
  created () {
    this.$store.dispatch('shopcar/getCartList')
  },
  computed: {
    // 映射数据
    ...mapState('shopcar', ['cart'])
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 46px 0 50px 0;
}
</style>
